<template>
  <div class="container">
    <div class="left"><component-c /></div>
    <div class="divide"></div>
    <div class="right"><component-d /></div>
  </div>
</template>

<script>
// import ComponentA from './01-ComponentA.vue'
// import ComponentB from './02-ComponentB.vue'

import ComponentC from './03-ComponentC.vue'
import ComponentD from './04-ComponentD.vue'

// import ComponentE from './05-ComponentE.vue'
// import ComponentF from './06-ComponentF.vue'
export default {
  components: {
    // ComponentA,
    // ComponentB
    ComponentC,
    ComponentD
    // ComponentE,
    // ComponentF
  }
}
</script>

<style scoped>
.container {
  display: flex;
}
.left {
  width: 500px;
  height: 600px;
}
.divide {
  background-color: gray;
  height: 1000px;
  width: 1px;
}
.right {
  flex: 1;
  height: 600px;
}
</style>
